<!-- 模板 -->
<template>
	<div class='aui-toast' v-show="show">
		<div class='aui-toast__inner' :class='["aui-toast__inner--" + location]'>
			<transition :name='dialogTransition'>
				<div class='aui-toast__inner__content' v-show="isComponentShow">
					<div class='aui-toast__inner__content__body'>
						{{msg}}
					</div>
				</div>
			</transition>
		</div>
	</div>
</template>

<!-- js -->
<script>
	export default{
		data(){
			return{
				show: !1,
				type: '',
	    		isComponentShow: !1,
	    		dialogTransition: "aui-toast",
	    		msg: "",
				duration: 2000,
				clearTime: false,
				timeout: null,
    			location: "middle"	
			}
		},
		methods: {
			onShow(vm) {
				this.show = !0;

				setTimeout(() => {
					this.isComponentShow = !0;
				}, 10);

				if(this.clearTime && this.timeout){
					clearTimeout(this.timeout);
					this.clearTime = false;
				}
				this.clearTime = true;
				this.timeout = setTimeout(() => {
					this.clearTime = false;
					this.onHide();
					if(vm && vm.cb && typeof vm.cb == "function"){
						vm.cb();
					}
				}, this.duration);
			},
			onHide() {
				this.isComponentShow = !1;
				setTimeout(() => {
					this.show = !1;
				}, 10);
			}
		}
	}
</script>


<!-- scss -->
<style lang="scss" scoped>
	@import "./index.scss";
</style>